<template>
    <div class="point-info">
        <div class="desc">
            <span>
                <span style="padding-right: 5px;">积分:</span>
                <span>{{ getUserInfo.point }}</span>
                <span class="button cursor-pointer" @click="showHelp" style="margin-left: 20px;">?</span>
            </span>
            <span :class="`sign cursor-pointer ${isSigned ? 'is-disabled' : ''}`" @click="sign" v-limitClick>
                {{ isSigned ? '已签到' : '签到' }}
            </span>
        </div>
        <el-table :data="tableData" border header-cell-class-name="el-table-header-cell" cell-class-name="el-table-cell"
            class="e-page points-table">
            <template #empty>
                <div>
                    <div>暂无数据</div>
                </div>
            </template>
            <el-table-column prop="sign_date" label="签到时间" />
            <el-table-column prop="sign_from" label="签到来源">
                <template #default="scope">
                    {{ signFrom[scope.row.sign_from] }}
                </template>
            </el-table-column>
            <el-table-column prop="points" label="获得积分" />
        </el-table>
    </div>
</template>

<script setup>
import { useElMessage, useRequest, useElMessageBox } from "@/hooks"
import { randomKey, decryption } from "@/utils/tools"
import { storeToRefs, useUserStore } from "@/pinia"

const signFrom = { 1: "网页", 2: "微信小程序" }
const userStore = useUserStore()
let tableData = $ref([])
const { getUserInfo } = storeToRefs(userStore)

let isSigned = $ref(new Date(getUserInfo.value.lastSignDate).format("YYYY-MM-DD") === new Date().format("YYYY-MM-DD"))

const sign = () => {
    if (isSigned) return
    isSigned = true
    useRequest.post("https://api.dansj.cn/sign", { from: randomKey(15) + "1" + randomKey(15) }).then(resp => {
        useElMessage[resp.status ? 'success' : 'error'](resp.message)
        isSigned = resp.status
        if (isSigned) {
            useRequest.post("https://api.dansj.cn/reg/user/check").then(response => {
                if (response && response.status) {
                    userStore.updateUserInfo(JSON.parse(decryption(response.data)))
                }
            })
        }
    })
}

const getPointsRecord = () => {
    useRequest.get("https://api.dansj.cn/pointsRecord", { page: 1, limit: 30 }).then(response => {
        if (response && response.status) {
            tableData = response.data
        }
    })
}

let pointRule = $ref([])
const getPointsRule = () => {
    useRequest.get("https://api.dansj.cn/pointRule").then(response => {
        if (response && response.status) {
            pointRule = response.data
        }
    })
}

getPointsRule()

const showHelp = () => {
    const title = [h("span", { class: "point-item" }, "等级"), h("span", { class: "point-item" }, "积分"), h("span", { class: "point-item" }, "QPS"), h("span", { class: "point-item" }, "调用次数")]
    const pointMap = pointRule.map((current, index) => {
        const prev = pointRule[index - 1]
        return h('div', { style: { width: "100%" } }, [h("span", { class: "point-item" }, current.lv), h("span", { class: "point-item" }, (prev?.point + 1 || 0) + "~" + current.point),
        h("span", { class: "point-item" }, current.lv + "次/秒"), h("span", { class: "point-item" }, current.lv * 100 + "次/天")
        ])
    })

    const topLv = Math.max(...pointRule.map((current) => {
        return current.lv
    })) + 1

    useElMessageBox("积分说明", h('p', null, [
        h('div', '1. 目前只能通过网页签到，每日签到一次，后续可能会增加签到或者积分获取方式'),
        h('div', '2. 每连续两天没有签到，积分衰减1点，直至衰减为0，衰减的积分无法恢复'),
        h('div', '3. 积分历史记录只显示最近30次，如需获取更多记录，请联系管理员查询'),
        h('div', '4. 积分规则如下：'),
        h('div', null, title),
        h('div', null, pointMap),
        h('div', null, [h("span", { class: "point-item" }, topLv), h("span", { class: "point-item" }, ">" + pointRule[pointRule.length - 1]?.point), h("span", { class: "point-item" }, topLv + "次/秒"), h("span", { class: "point-item" }, topLv * 100 + "次/天")])
    ]), { showIcon: false, customClass: "pointer-help", showClose: true, showConfirmButton: false, closeOnClickModal: true })
}

getPointsRecord()

</script>

<style>
.point-info {
    height: 100%;
}

.point-info .desc {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
}

.point-info .sign {
    background: beige;
    padding: 0px 5px;
    font-size: 16px;
    border-radius: 3px;
    width: 50px;
    text-align: center;
    display: inline-block;
    color: #000
}

.point-info .points-table {
    height: calc(100% - 50px);
    background: transparent;
}

.point-item {
    width: 25%;
    display: inline-block;
    text-align: center;
}

.pointer-help {
    top: 15vh
}
</style>
